<template>
    <div class="container">
        <div class="main">
            <div class="pay-title">
                支付总金额 <span class="pay-price">￥ {{order.price | tofixed}}</span>
            </div>
            <div class="pay-main">
                <h4>微信支付</h4>
                <el-row type="flex" 
                justify="space-between" 
                align="middle"
                class="pay-qrcode">
                    <div class="qrcode">
                        <!-- 二维码 -->
                        <canvas id="qrcode-stage"></canvas>
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                    <div class="pay-example">
                        <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
// 引入生成二维码库
import QRCode from 'qrcode';
export default {
    data(){
        return {
            order: {},
            time: null
        }
    },
    methods:{
        // 订单支付状态查询
        checkPay(data){
            this.$axios({
                url: "/airorders/checkpay",
                method: "post",
                data:{
                    // 订单id
                    id: data.id,
                    // 订单金额
                    nonce_str: data.price,
                    // 订单编码
                    out_trade_no: data.orderNo
                },
                headers:{
                    // Bearer属于jwt的token标准
                    Authorization: "Bearer " + this.$store.state.user.userInfo.token
                }
            }).then(res=>{
                const{statusTxt} = res.data;
                // 判断是否支付成功
                if(statusTxt == "支付完成"){
                    // 支付成功，提示用户，支付成功
                     this.$alert(statusTxt, "提示", {
                    type: 'success'
                });
                // 清除停止定时器
                clearInterval(this.time);
                // 把time清空
                this.time = null;
                }
                // console.log(res);
                
            })
        }
    },
    mounted(){
        // 获取订单id
        const {id} = this.$route.query;
        // console.log(id)
        // 为什么加一个定时器，因为js队列问题，mounted运行比vuex的本地缓存插件快，加一个定时器，让他先先跳到运行那个运行store插件，不然获取不到本地储存的token值
        setTimeout(()=>{
        // 获取订单数据
            this.$axios({
            url: "/airorders/" + id,
            headers:{
                // Bearer属于jwt的token标准
                Authorization: "Bearer " + this.$store.state.user.userInfo.token
            }
        }).then(res=>{
            console.log(res)
            // 把请求回来订单数据，赋值给一个对象缓存
            this.order = res.data;
             // 生成二维码
            var canvas = document.querySelector("#qrcode-stage");
            const code = this.order.payInfo.code_url
            // 第一个参数是canvas dom元素, 要生成二位的连接,第二位是付款接口，第三位是样式对象，第四位是错误对象，报错对象
            QRCode.toCanvas(canvas, code,{width:200}, function (error) {
            if (error) console.error(error)
            console.log('success!');
            })
            // 支付结果轮询
            this.time = setInterval(()=>{
                this.checkPay(this.order)
            },3000)
        })
        },1)
    },
    filters:{
         tofixed(value){
            //  console.log(value)
            // 设置金额保留2位小数
             return Number(value || 0).toFixed(2)
         }
    }
    
}
</script>

<style scoped lang="less">
.container{
    background:#f5f5f5;
    padding: 30px 0;

    .main{
        width:1000px;
        margin:0 auto;

        .pay-title{
            text-align: right;
            span{
                font-size:28px;
                color:orangered;
            }
        }

        .pay-main{
            background:#fff;
            margin-top:10px;
            border-top: 5px orange solid;
            padding:30px;

            h4{
                font-size: 28px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            .pay-qrcode{
                padding:0 80px;
            }

            .qrcode{
                border:1px #ddd solid;
                padding:15px;
                height: fit-content;

                #qrcode-stage{
                    width:200px;
                    height:200px;
                    margin-bottom: 10px;
                }

                p{
                    line-height: 2;
                    text-align: center;
                }
            }
        }
    }
}
</style>